<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<!DOCTYPE>
	<head>

<style type="text/css">
	.widget-dialog{
		font-size: 12px;
		position: fixed;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.widget-dialog-container{
		position: absolute;
		left:50%;
		top:50%;
		border:2px solid #e0e1e5;
		border-radius: 2px;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
		min-width: 250px;
		min-height: 230px;
		width:400px;
		padding:20px;
		z-index: 1000;
		background: #FFF;
		-webkit-transform: translate(-50%, -50%);
	}

	.widget-dialog-head{
		position: relative;
		height:50px;
		line-height: 50px;
		text-align: center;
	}

	.widget-dialog-title{


		text-align: center;
	}



	.widget-dialog-body{

	}

	.catagory-chose-container{
		border:1px solid #e0e1e5;
	}

	.move-to{
		margin:10px;
	}

.catagory-chose-container{
	margin-top:10px;
}
	.catagory-chose-tree{
		height:200px;
		border-width:1px 0px 0px 0px;
		border-color:#e0e1e5;
		border-style: solid;
		padding:10px;

	}

	.name{
		display: flex;
		position: relative;
		display: -webkit-flex;
	}

	.tree-title{
		display: flex;
		display: -webkit-flex;
		padding-left:20px;
		-webkit-align-items: center;
    align-items: center;
	}

	ul{
		list-style: none;
		margin:0px;
		padding:0px;
		display: block;
	}
	.tree-container{
		display: block;
	}

	.file-tree{

	}

.file-tree .tree-title i.folder-icon{
	width:24px;
	height:24px;
}
.file-tree .tree-title.expandable	.folder-icon{
		background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
background-position: 88.6685552407932% 64.86486486486487%;

	}

.file-tree .tree-title i.arrow{
	display: block;
	width: 14px;
	height: 14px;
}
	.file-tree .tree-title.expandable .arrow{

		background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
		background-position: 56.74931129476584% 98.83381924198251%;


	}

	.toggle{
		width:14px;
		height:14px;
	}

	.file-tree .tree-title.expandable.expanded .arrow {
    background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
    background-position: 68.31955922865014% 98.83381924198251%;

}

.file-tree .tree-title.expandable.expanded i.folder-icon{
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position:56.657223796033996% 47.747747747747745%;
}

.widget-dialog-footer{
	text-align: center;
	padding:10px 0px;
	vertical-align: middle;
}

.widget-dialog .widget-dialog-footer .btn {
    height: 34px;
    min-width: 82px;
    border-radius: 3px;
		margin-left: 20px;
}
.btn {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color: #ffffff;
    background: #398dee;
    border-radius: 2px;
    border: 1px solid #398dee;
    cursor: pointer;
    outline: none;
	}
	.btn-cancel{
		background: #fff;
		color:#82b6f4;
	}

	.svg_dialog_close {
    background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
    background-position: 100% 39.16913946587537%;
    width: 20px;
    height: 20px;
		position: absolute;
		right:0px;
		top:15px;
		cursor:pointer;
}

.svg_dialog_close:hover{
	background: url(static/centerPane/sprite-4ce3c9eaa2.svg) no-repeat;
	background-position: 94.39775910364146% 12.462908011869436%;

	width: 20px;
	height: 20px;
	position: absolute;
	right:0px;
	top:15px;
	cursor:pointer;
}

/*
reset password
*/
.widget-dialog .widget-dialog-body .sp-bd{
	padding-top:10px;
}

.widget-dialog .widget-dialog-body .sp-hd{
	height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    color: #3e3e3e;
}

 .sp-hd span{
	color:bac0c6;
}
.widget-dialog .widget-dialog-body .sp-bd input{
		width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    line-height: 28px;
    border-radius: 3px;
		box-shadow: none;
		border:1px solid rgb(224, 225, 229);
		padding:5px 10px;
}
</style>
	</head>

	<body>
<!--
	<div class="widget-dialog">
		<div class="widget-dialog-container">
			<div class="widget-dialog-head">
				<span class="widget-dialog-title">移动到</span>
				<span class="svg_dialog_close"></span>
			</div>

			<div class="widget-dialog-body">
				<div><i class="file-icon"></i>新建文件夹</div>
				<div class="catagory-chose-container">
					<div class="move-to">移动到</div>
					<div class="catagory-chose-tree">
						<div class="file-tree">
							<div class="tree-title expandable expanded">
								<div class="toggle"><i class="arrow"></i></div>
								<div class="name">
									<i class="folder-icon"></i>
									<span style="line-height:24px;">asdf</spna>
								</div>

							</div>
							<ul class="tree-container">
								<li>
									<div class="file-tree">
										<div class="tree-title expandable">
											<div class="toggle"><i class="arrow"></i></div>
											<div class="name">
												<i class="folder-icon"></i>
												<span>asdf</spna>
											</div>

										</div>
										<ul class="tree-container">
											<li>
											</li>
											<li>
											</li>
										</ul>
									</div>
								</li>
								<li>
								</li>
							</ul>
						</div>
					</div>
				</div>
				</div>
				<div class="widget-dialog-footer">
					<button class="btn">确定</button>
					<button class="btn btn-cancel">取消</button>
				</div>
			</div>
		</div>
	</div>
-->

<div class="widget-dialog">
	<div class="widget-dialog-container">
		<div class="widget-dialog-head">
			<span class="widget-dialog-title">移动到</span>
			<span class="svg_dialog_close"></span>
		</div>

		<div class="widget-dialog-body">
			<div class="sp-hd">设置阅读密码<span>(密码长度4-50)</span></div>
			<div class="sp-bd">
        <input placeholder="请输入密码" type="password" class="ng-pristine ng-valid ng-touched">
        <input placeholder="再次输入密码" type="password" class="ng-untouched ng-pristine ng-valid">

    </div>
			</div>
			<div class="widget-dialog-footer">
				<button class="btn">确定</button>
				<button class="btn btn-cancel">取消</button>
			</div>
		</div>
	</div>
	</body>

</html>
